<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body>

<!-- 主体区域 -->
<section id="app">
  <!-- 输入框 -->
  <header class="header">
    <h1>小黑记事本</h1>
    <input @keyup.enter="submit" v-model="textInput" placeholder="请输入任务" class="new-todo"  />
    <!-- 给添加任务注册点击事件-->
    <button @click="add" class="add">添加任务</button>
  </header>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item,index) in list" :key=item.id>
        <div class="view">
          <span class="index">{{index+1}}.</span> <label>{{item.name}}</label>
          <button @click="del(item.id)" class="destroy"></button>
        </div>
      </li>
    </ul>
  </section>
  <!-- 统计和清空  若没有任务，下面则不显示(数组长度为0，不显示) -->
  <footer v-show="list.length>0" class="footer">
    <!-- 统计 -->
    <span class="todo-count">合 计:<strong> {{list.length}}</strong></span>
    <!-- 清空 -->
    <button @click="clear" class="clear-completed">
      清空任务
    </button>
  </footer>
</section>

<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      // 文本框输入内容
      textInput:"",
      list:[
        {id:1,name:'ahha'},
      ],
      
    },
    methods:{
      // 删除
      del(id){
       this.list = this.list.filter(item=>item.id!==id)
      },
      // 添加
      add(){
        // 若用户输入内容为空，提示用户
        if(this.textInput.trim()===''){
          alert('请输入内容')
          return
        }
        this.list.unshift({
          id:+new Date(),
          name:this.textInput
        })
        // 添加后清空输入框
        this.textInput = ''
      },
      // 回车添加
      submit(){
        this.add()
        // @keyup.enter就相当于if(e.key==='Enter')
      },
      // 清空
      clear(){
        //this.list.length = 0 与下面有何区别
        this.list = []
        // this.list.length = 0
      }
    },
  })

</script>
</body>

</html>
